<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
           #{ managerCriarUsuario.usuario.id == null ? 'Cadastrar Usuário' : 'Editar Usuário'  }
        </ui:define>
        
        <ui:define name="content">
            <h:form id="criarUsuarioForm">
                <p:messages id="criarUsuarioMessages" autoUpdate="true" />        
                
                <div class="actions">
                    <div id="buttons">

                        <p:button value="Pesquisar Usuários" outcome="pesquisarUsuario.xhtml"
                                icon="ui-icon-search"
                                styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>
                
                <p:fieldset  legend="Dados do Usuário">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome" for="nomeInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="nomeInputText" value="#{ managerCriarUsuario.usuario.nome }"
                                         required="true" requiredMessage="Nome é obrigatório" />
                        </div>

                        <div class="column1">
                            <p:outputLabel value="Cargo" for="cargoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="cargoInputText" value="#{ managerCriarUsuario.usuario.cargo }"
                                         required="true" requiredMessage="Cargo é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="CPF" for="cpfInputMask" />
                        </div>
                        <div class="column3">
                            <p:inputMask id="cpfInputMask" value="#{ managerCriarUsuario.usuario.cpf  }" mask="999.999.999-99" />
                        </div>

                        <div class="column1">
                            <p:outputLabel value="RG" for="rgInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="rgInputText" value="#{ managerCriarUsuario.usuario.rg  }" />
                        </div>
                    </div>

                    <div class="row">                    
                        <div class="column2">
                            <p:outputLabel value="Sexo" for="sexoSelectOneRadio" />
                        </div>
                        <div class="column3">
                            <p:selectOneRadio id="sexoSelectOneRadio" value="#{ managerCriarUsuario.usuario.sexo }">
                                <f:selectItems value="#{ enums.sexos() }" />
                            </p:selectOneRadio>
                        </div>

                        <div class="column1">
                            <p:outputLabel value="Email" for="emailInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="emailInputText" value="#{ managerCriarUsuario.usuario.email }" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Telefone" for="tipoTelefoneSelectOneMenu" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoTelefoneSelectOneMenu" value="#{ managerCriarUsuario.usuario.telefone.tipoTelefone }"
                                             required="true" requiredMessage="Tipo do Telefone é obrigatório" >
                                <f:selectItems value="#{ enums.tiposTelefone() }" />
                            </p:selectOneMenu>
                        </div>                    
                        <div class="column1">
                            <p:outputLabel value="DDD" for="dddInputMask" />
                        </div>
                        <div class="column1">
                            <p:inputMask id="dddInputMask" value="#{ managerCriarUsuario.usuario.telefone.ddd }" mask="99" required="true" requiredMessage="DDD é obrigatório" />
                        </div>
                        <div class="column3">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column2">
                            <p:inputText id="numeroInputText" value="#{ managerCriarUsuario.usuario.telefone.numero }" required="true" requiredMessage="Número é obrigatório" />
                        </div>
                    </div>

                </p:fieldset>

                <p:fieldset  legend="Dados de Acesso" id="dadosAcessoPanel" >
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Login" for="loginInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="loginInputText" value="#{ managerCriarUsuario.usuario.login }" maxlength="20" required="true" requiredMessage="Login é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Senha" for="senhaInputText" />
                        </div>
                        <div class="column3">
                            <p:password id="senhaInputText" value="#{ managerCriarUsuario.usuario.senha }" required="#{ managerCriarUsuario.usuario.id == null }" maxlength="32" requiredMessage="Senha é obrigatório" feedback="true" goodLabel="Boa" weakLabel="Fraca" strongLabel="Forte" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Confirmar Senha" for="confirmarSenhaInputText" />
                        </div>
                        <div class="column3">
                            <p:password id="confirmarSenhaInputText" value="#{ managerCriarUsuario.confirmarSenha }" required="#{ managerCriarUsuario.usuario.id == null }" maxlength="32" requiredMessage="Confirmar Senha é obrigatório" feedback="true" goodLabel="Boa" weakLabel="Fraca" strongLabel="Forte" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset  legend="Permissões" id="dadosPermissaoPanel" styleClass="column12" >
                    <div class="column12">
                        <p:pickList id="grupoPickList" value="#{ managerCriarUsuario.grupoDualList }" var="grupo"
                                    itemValue="#{ grupo }" itemLabel="#{ grupo.descricao }" converter="conversorgrupo">
                            <f:facet name="sourceCaption">Grupos</f:facet>
                            <f:facet name="targetCaption">Grupos Selecionados</f:facet>
                        </p:pickList>
                    </div>
                </p:fieldset>

                <div class="command">
                    <p:commandButton action="#{ managerCriarUsuario.salvar() }" value="Salvar" oncomplete="widthFix();"
                            update="@form" icon="ui-icon-disk"  onsuccess="goY(0);" styleClass="ui-priority-primary" />
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarUsuario.xhtml" />
                </div>

            </h:form>

        </ui:define>
    </ui:composition>

</html>
